// 搜索组件
import React from 'react';
import { connect } from 'react-redux';
import { Form, Input, Select, Button, Space, DatePicker } from 'antd';
import {
  SEARCH_OPT,
  ORDER_OPT,
  SALE_OPT,
  PAY_METHOD_OPT,
  PROMOTION_CHANNEL_OPT,
  PAY_PLATFORM_OPT,
} from '../../../store/constants/order';
import dayjs from 'dayjs';
import { on_search, update_res } from '../../../store/actions/order';
const { RangePicker } = DatePicker;

// UI组件
const OrderSearch = props => {
  // console.log(props);
  const { state, on_search, update_res } = props;
  const width = 200;
  const [form] = Form.useForm();

  const rangePresets = [
    {
      label: '今天',
      value: [dayjs().add(0, 'd'), dayjs()],
    },
    {
      label: '昨天',
      value: [dayjs().add(-1, 'd'), dayjs()],
    },
    {
      label: '最近7天',
      value: [dayjs().add(-7, 'd'), dayjs()],
    },
    {
      label: '最近30天',
      value: [dayjs().add(-30, 'd'), dayjs()],
    },
  ];
  const onRangeChange = (dates, dateStrings) => {
    // if (dates) {
    //   console.log('From: ', dates[0], ', to: ', dates[1]);
    //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    // } else {
    //   console.log('Clear');
    // }
  };
  const onReset = () => {
    form.resetFields();
    on_search(false);
  };
  const onSubmit = () => {
    // console.log(state);
    // 获取表单数据
    // console.log(form.getFieldValue());
    const {
      searchOptCont,
      searchOpt,
      orderTime,
      goods,
      orderState,
      afterSaleState,
      payMethod,
      payPlatform,
      promotionChannel,
    } = form.getFieldValue();
    //   {
    //     "searchOptCont": "111",
    //     "searchOpt": 2,
    //     "orderTime": [
    //         "2022-12-30T06:24:06.154Z",
    //         "2022-12-30T06:24:06.154Z"
    //     ],
    //     "goods": "222",
    //     "orderState": 1,
    //     "afterSaleState": 2,
    //     "payMethod": 2,
    //     "payPlatform": 2,
    //     "promotionChannel": 2
    // }
    let matchArr = [];
    for (let i = 0; i < 8; i++) {
      matchArr.push(true);
    }
    let cont = searchOptCont ? searchOptCont.trim() : '';
    // 搜索
    const newArr = state.filter(el => {
      switch (searchOpt) {
        case 1:
          matchArr[0] = cont ? el.orderNum === cont * 1 : false;
          break;
        case 2:
          matchArr[0] = cont ? el.consignee.includes(cont) : false;
          break;
        case 3:
          matchArr[0] = cont ? el.consigneePhone.includes(cont) : false;
          break;
        case 4:
          break;
        case 5:
          matchArr[0] = cont ? el.trackingNumber === cont : false;
          break;
        case 6:
          matchArr[0] = cont ? el.username.includes(cont) : false;
          break;
        case 7:
          break;
        default:
          break;
      }
      matchArr[1] = orderTime
        ? new Date(el.orderTime) <= orderTime[1].$d &&
          new Date(el.orderTime) >= orderTime[0].$d
        : true;
      matchArr[2] = goods ? el.goods.includes(goods) : true;
      matchArr[3] =
        orderState && orderState !== 0
          ? el.orderState === ORDER_OPT[orderState].label
          : true;
      matchArr[4] =
        afterSaleState && afterSaleState !== 1
          ? el.afterSaleState === SALE_OPT[afterSaleState - 1].label
          : true;
      matchArr[5] =
        payMethod && payMethod !== 1
          ? el.payMethod === PAY_METHOD_OPT[payMethod - 1].label
          : true;
      matchArr[6] =
        payPlatform && payPlatform !== 1
          ? el.payPlatform === PAY_PLATFORM_OPT[payPlatform - 1].label
          : true;
      matchArr[7] =
        promotionChannel && promotionChannel !== 1
          ? el.promotionChannel ===
            PROMOTION_CHANNEL_OPT[promotionChannel - 1].label
          : true;
      const res = matchArr.some(el => el === false);
      // console.log(matchArr);
      return !res;
    });
    // console.log(newArr);
    update_res(newArr);
    on_search(true);
  };
  const exportOrder = () => {};
  // 表单校验
  return (
    <Form layout='inline' form={form}>
      <Space direction='vertical' size={20}>
        <Space>
          <Form.Item label='订单搜索' name='searchOpt'>
            <Select
              style={{ width }}
              allowClear
              options={SEARCH_OPT}
              placeholder='请选择'
            />
          </Form.Item>
          <Form.Item name='searchOptCont'>
            <Input placeholder='请输入' style={{ width }} />
          </Form.Item>
        </Space>
        <Space>
          <Form.Item label='下单时间' name='orderTime'>
            <RangePicker
              presets={rangePresets}
              showTime
              format='YYYY/MM/DD HH:mm:ss'
              onChange={onRangeChange}
            />
          </Form.Item>
        </Space>
        <Space>
          <Form.Item label='商品名称' name='goods'>
            <Input placeholder='请输入' style={{ width }} />
          </Form.Item>
          <Form.Item label='订单状态' name='orderState'>
            <Select
              style={{ width }}
              allowClear
              options={ORDER_OPT}
              placeholder='请选择'
            />
          </Form.Item>
          <Form.Item label='售后状态' name='afterSaleState'>
            <Select
              style={{ width }}
              allowClear
              options={SALE_OPT}
              placeholder='请选择'
            />
          </Form.Item>
        </Space>
        <Space>
          <Form.Item label='付款方式' name='payMethod'>
            <Select
              style={{ width }}
              allowClear
              options={PAY_METHOD_OPT}
              placeholder='请选择'
            />
          </Form.Item>
          <Form.Item label='支付平台' name='payPlatform'>
            <Select
              style={{ width }}
              allowClear
              options={PAY_PLATFORM_OPT}
              placeholder='请选择'
            />
          </Form.Item>
          <Form.Item label='推广渠道' name='promotionChannel'>
            <Select
              style={{ width }}
              allowClear
              options={PROMOTION_CHANNEL_OPT}
              placeholder='请选择'
            />
          </Form.Item>
        </Space>
        <Space size={10} align='center'>
          <Button type='primary button' onClick={onSubmit}>
            搜索
          </Button>
          <Button htmlType='button' onClick={onReset}>
            重置
          </Button>
          <Button htmlType='button' onClick={exportOrder}>
            导出
          </Button>
        </Space>
      </Space>
    </Form>
  );
};

// 容器组件
export default connect(state => ({ state: state.orderReducer }), {
  on_search,
  update_res,
})(OrderSearch);
